<script setup lang="ts" name="BulkTally">
import { onMounted, reactive, ref, watch } from "vue";
import SelectWorkActivity from "@/components/SelectInfo/SelectWorkActivity.vue";
import SelectShip from "@/components/SelectInfo/SelectShip.vue";
import {
  type ConfigProviderThemeVars,
  showFailToast,
  showSuccessToast
} from "vant";
import moment from "moment";
import SelectOperationProcess from "@/components/SelectInfo/SelectOperationProcess.vue";
import SelectKeeper from "@/components/SelectInfo/SelectKeeper.vue";
import { useBillInfo } from "@/store/bill-info";
import { useEditOstInfo } from "@/store/edit-ost-info";
import router from "@/router";
import { useDictInfo } from "@/store/dict";
import SelectPosition from "@/components/SelectInfo/SelectPosition.vue";
import SelectShipCargoType from "@/components/SelectInfo/SelectShipCargoType.vue";
import {
  GetAssignMachineTree,
  GetAssignWorker,
  GetShipArrange,
  GetTallyMachineTree,
  SubmitBulkTally
} from "@/api/tally";
import SelectBulkTallyType from "@/components/SelectInfo/SelectBulkTallyType.vue";
import SelectLandArrange from "@/components/SelectInfo/SelectLandArrange.vue";
import SelectShipArrange from "@/components/SelectInfo/SelectShipArrange.vue";
import SelectHold from "@/components/SelectInfo/SelectHold.vue";
import FloatHeader from "@/components/NavBar/FloatHeader.vue";
import SelectTeam from "@/components/SelectInfo/SelectTeam.vue";
import { isNumeric } from "vant/es/utils";
import { useToken } from "@/store/token";
import { setToJoinedStr } from "@/utils/set-to-joinedStr";
import type { MachineTreeItem } from "@/utils/interface";

interface positionData {
  areaId: string;
  areaName: string;
  id: string;
  name: string;
}

const dictStore = useDictInfo();
const timeSpaceList = ref([] as Array<any>);
const shipLandList = ref([] as Array<any>);
const tallyTypeList = ref([] as Array<any>);
const outTimeSpaceList = ref([] as Array<any>);

const record = ref({} as any);
const isEdit = ref(false);
const isReuse = ref(false);
onMounted(() => {
  timeSpaceList.value = dictStore.getDictByCode("time_space");
  outTimeSpaceList.value = dictStore.getDictByCode("out_times");
  shipLandList.value = dictStore.getDictByCode("ship_land");
  tallyTypeList.value = dictStore.getDictByCode("tally_type");
  tallyTypeList.value = tallyTypeList.value.filter(
    i => i.remark.indexOf("one;") >= 0
  );

  const editBillInfoStore = useEditOstInfo();
  record.value = editBillInfoStore.editOstInfo;

  if (record.value?.id) {
    isEdit.value = true;
    isReuse.value = record.value.isReuse;
    transportShip.id = record.value.transportShipId;
    transportShip.value = record.value.shipNameZh;

    tallyDateAndTimeSpace.tallyDate = record.value.tallyDate;
    tallyDateAndTimeSpace.timeSpace = record.value.timeSpace;
    tallyDateAndTimeSpace.defaultDate = moment(record.value.tallyDate).toDate();
    tallyDateAndTimeSpace.outTimeSpace = record.value.outTimeSpace;

    shipLand.value = record.value.shipLand;
    operationType.id = record.value.operationType;
    operationType.value = record.value.operationTypeName;
    tallyType.dictKey = record.value.tallyType;
    tallyType.dictValue = record.value.tallyTypeName;
    workActivity.value = record.value.workActivityName;
    workActivity.ids = record.value.workActivity
      ? record.value.workActivity.split(",")
      : [];

    assemblyLine.arrangeId = record.value.arrangeId;
    assemblyLine.arrangeInfo = record.value.arrangeInfo;
    assemblyLine.cars = record.value.cars;

    if (record.value.shipLand === "SHIP") {
      assemblyLine.hold = record.value.hold;
      assemblyLine.holdName = record.value.holdName;

      GetShipArrange({ arrangeId: record.value.arrangeId }).then((res: any) => {
        if (res.data) {
          assemblyLine.holdsList = res.data[0].holdsList;
        }
      });

      GetTallyMachineTree({ tallyId: record.value.id }).then((res: any) => {
        if (res.success && res.data.length > 0) {
          workerMachine.machineTree = res.data;
        }
      });
    }

    workerMachine.company = record.value.company;
    workerMachine.companyName = record.value.companyName;
    workerMachine.team = record.value.team;
    workerMachine.teamName = record.value.teamName;
    workerMachine.group = record.value.groups;
    workerMachine.groupName = record.value.groupsName;
    workerMachine.workerInfo = record.value.workerInfo;

    cargoType.code = record.value.cargoType;
    cargoType.name = record.value.cargoTypeName;

    tallyFrom.oriAreaId = record.value.oriAreaId;
    tallyFrom.oriAreaName = record.value.oriAreaName;
    tallyFrom.oriPositionId = record.value.oriPositionId;
    tallyFrom.oriPositionName = record.value.oriPositionName;
    tallyFrom.oriSpot = record.value.oriSpot;
    tallyFrom.oriTon = record.value.oriTon;
    tallyFrom.toAreaId = record.value.toAreaId;
    tallyFrom.toAreaName = record.value.toAreaName;
    tallyFrom.toPositionId = record.value.toPositionId;
    tallyFrom.toPositionName = record.value.toPositionName;
    tallyFrom.toSpot = record.value.toSpot;
    tallyFrom.toTon = record.value.toTon;

    safeProduction.keeper = record.value.keeper;
    safeProduction.keeperName = record.value.keeperName;
    safeProduction.isCover = record.value.isCover;
    safeProduction.isBedding = record.value.isBedding;
    safeProduction.isSafeProduction = record.value.isSafeProduction;
    safeProduction.remark = record.value?.remark;
  }
});

const themeVars: ConfigProviderThemeVars = {
  cellLabelFontSize: "13px",
  fieldInputTextColor: "#7f7e7e",
  numberKeyboardZIndex: 1000,
  cellBorderColor: "#cccccc",
  borderWidth: "1.5px",
  cellHorizontalPadding: "0px",
  cellVerticalPadding: "10px",
  radioDotSize: "5px",
  navBarTitleTextColor: "#ffffff",
  navBarIconColor: "#ffffff",
  fontBold: 0,
  popupBackground: "#f6f6f6"
};

const transportShip = reactive({
  id: "",
  value: "",
  showSelectShipPopup: false
});

function beforeShowSelectShipPopup() {
  if (isEdit.value) {
    return;
  }
  transportShip.showSelectShipPopup = true;
}

const isSelectShipOpen = (value: boolean) => {
  transportShip.showSelectShipPopup = value;
};
const selectedShip = (value: any) => {
  transportShip.id = value.transportShipId;
  transportShip.value = value.shipNameZh;
};

const cargoType = reactive({
  code: "",
  name: "",
  showSelectCargoTypePopup: false
});

const isSelectShipCargoTypeOpen = (value: boolean) => {
  cargoType.showSelectCargoTypePopup = value;
};

const selectedShipCargoType = (value: any) => {
  cargoType.code = value.code;
  cargoType.name = value.name;
};

const tallyDateAndTimeSpace = reactive({
  showCalendar: false,
  defaultDate: new Date(),
  minDate: new Date(new Date().setDate(new Date().getDate() - 180)),
  maxDate: new Date(new Date().setDate(new Date().getDate() + 30)),
  tallyDate: moment(new Date()).format("YYYY-MM-DD"),
  timeSpace:
    new Date().getHours() >= 8 && new Date().getHours() <= 19 ? "DAY" : "NIGHT",
  outTimeSpace: ""
});

function onCalendarConfirm(dates: any) {
  tallyDateAndTimeSpace.tallyDate = moment(dates).format("YYYY-MM-DD");
  tallyDateAndTimeSpace.showCalendar = false;
}

const shipLand = ref("");

const operationType = reactive({
  id: "",
  value: "",
  showSelectOperationProcessPopup: false
});

function beforeSelectOperationProcessOpen() {
  if (isEdit.value) {
    return;
  }
  operationType.showSelectOperationProcessPopup = true;
}

const isSelectOperationProcessOpen = (value: boolean) => {
  operationType.showSelectOperationProcessPopup = value;
};
const selectedOperationProcess = (value: any) => {
  operationType.id = value.id;
  operationType.value = value.name;

  tallyType.dictKey = value.tallyType;
  tallyType.dictValue = value.tallyTypeName;
};

const tallyType = reactive({
  dictKey: "",
  dictValue: "",
  showSelectBulkTallyTypePopup: false
});

const selectedBulkTallyType = (value: any) => {
  tallyType.dictKey = value.dictKey;
  tallyType.dictValue = value.dictValue;
};

const isSelectBulkTallyType = (value: boolean) => {
  tallyType.showSelectBulkTallyTypePopup = value;
};

const workActivity = reactive({
  ids: [] as string[],
  value: "",
  showSelectWorkActivityPopup: false
});
const isSelectWorkActivityOpen = (value: boolean) => {
  workActivity.showSelectWorkActivityPopup = value;
};
const selectedWorkActivity = (value: any) => {
  workActivity.ids = value.processIds;
  workActivity.value = value.processNames;
};

const assemblyLine = reactive({
  arrangeId: "",
  arrangeInfo: "",
  showSelectArrangePopup: false,
  showSelectHoldPopup: false,
  holdsList: [] as any[],
  hold: "",
  holdName: "",
  cars: ""
});

const workerMachine = reactive({
  workerInfo: "",
  company: "",
  companyName: "",
  team: "",
  teamName: "",
  group: "",
  groupName: "",
  originTeamList: [],
  machineTree: [] as MachineTreeItem[],
  showSelectWorkerPopup: false
});

const isSelectTeamOpen = (value: boolean) => {
  workerMachine.showSelectWorkerPopup = value;
};
const selectedTeam = (value: any) => {
  workerMachine.workerInfo = value.info;
  workerMachine.company = value.company;
  workerMachine.companyName = value.companyName;
  workerMachine.team = value.team;
  workerMachine.teamName = value.teamName;
  workerMachine.group = value.group;
  workerMachine.groupName = value.groupName;
  workerMachine.originTeamList = value.originData;
};

watch(
  () => shipLand,
  () => {
    assemblyLine.arrangeId = "";
    assemblyLine.arrangeInfo = "";
    assemblyLine.hold = "";
    assemblyLine.holdName = "";
    assemblyLine.holdsList = [];

    workerMachine.machineTree = [] as MachineTreeItem[];
    workerMachine.workerInfo = "";
    workerMachine.company = "";
    workerMachine.companyName = "";
    workerMachine.team = "";
    workerMachine.teamName = "";
    workerMachine.group = "";
    workerMachine.groupName = "";
  },
  { immediate: true }
);

const isSelectArrangeOpen = (value: boolean) => {
  assemblyLine.showSelectArrangePopup = value;
};
const selectedArrange = (value: any) => {
  workerMachine.machineTree = [] as MachineTreeItem[];
  workerMachine.workerInfo = "";
  workerMachine.company = "";
  workerMachine.companyName = "";
  workerMachine.team = "";
  workerMachine.teamName = "";
  workerMachine.group = "";
  workerMachine.groupName = "";

  const assignSearchParam = {
    arrangeId: "",
    loaderType: "LOADER_" + shipLand.value
  };

  assemblyLine.arrangeId = "";
  assemblyLine.arrangeInfo = "";
  assemblyLine.holdsList = [];
  const allHold = {
    hold: "hold-quanchuan",
    holdName: "全船"
  };


  if (shipLand.value === "SHIP") {
    assemblyLine.arrangeId = value.wasId;
    assemblyLine.arrangeInfo = value.lineNo + "-" + value.holdsName;
    assemblyLine.holdsList = value.holdsList;
    assemblyLine.holdsList.unshift(allHold);

    if (assemblyLine.holdsList.length > 2) {
      assemblyLine.holdName = allHold.holdName;
      assemblyLine.hold = allHold.hold;
    }

    if (assemblyLine.holdsList.length === 2) {
      assemblyLine.holdName = assemblyLine.holdsList[1].holdName;
      assemblyLine.hold = assemblyLine.holdsList[1].hold;
    }
  }

  if (shipLand.value === "LAND") {
    assemblyLine.arrangeId = value.walId;
    assemblyLine.arrangeInfo = value.info;
  }

  assignSearchParam.arrangeId = assemblyLine.arrangeId;

  GetAssignWorker(assignSearchParam).then((res: any) => {
    if (res.success && res.data.length > 0) {
      const teamData = res.data[0];
      workerMachine.workerInfo =
        teamData.companyName +
        "-" +
        teamData.teamName +
        "-" +
        teamData.groupName;
      workerMachine.company = teamData.company;
      workerMachine.companyName = teamData.companyName;
      workerMachine.team = teamData.team;
      workerMachine.teamName = teamData.teamName;
      workerMachine.group = teamData.groups;
      workerMachine.groupName = teamData.groupName;
    }
  });

  GetAssignMachineTree(assignSearchParam).then((res: any) => {
    if (res.success && res.data.length > 0) {
      workerMachine.machineTree = res.data as MachineTreeItem[];
      workerMachine.machineTree.forEach(mk => {
        mk.machineList.forEach(machine => {
          machine.isSelected = false;
        });
      });
    }
  });
};

const isSelectHoldOpen = (value: boolean) => {
  assemblyLine.showSelectHoldPopup = value;
};
const selectedHold = (value: any) => {
  assemblyLine.hold = value.hold;
  assemblyLine.holdName = value.holdName;
};

const safeProduction = reactive({
  keeper: "",
  keeperName: "",
  showSelectKeeperPopup: false,
  isSafeProduction: "Y",
  isCover: "OT",
  isBedding: "OT",
  remark: "",
  shipBillRemarkList: [] as Array<any>,
  shipBillRemark: "",
  showMoreChangeShift: [] as Array<any>,
  showMore: false
});
const isSelectKeeperOpen = (value: boolean) => {
  safeProduction.showSelectKeeperPopup = value;
};
const selectedKeeper = (value: any) => {
  safeProduction.keeper = value.accountId;
  safeProduction.keeperName = value.realName;
};

const tallyFrom = reactive({
  oriPositionId: "",
  oriPositionName: "",
  oriAreaId: "",
  oriAreaName: "",
  oriSpot: "无",
  oriTon: "0",
  toPositionId: "",
  toPositionName: "",
  toAreaId: "",
  toAreaName: "",
  toSpot: "",
  toTon: ""
});
const validator = (val: any) => isNumeric(val);
const showSelectOriPositionPopup = ref(false);
const isSelectOriPositionOpen = (value: boolean) => {
  showSelectOriPositionPopup.value = value;
};
const selectedOriPosition = (value: positionData) => {
  tallyFrom.oriAreaId = value.areaId;
  tallyFrom.oriAreaName = value.areaName;
  tallyFrom.oriPositionId = value.id;
  tallyFrom.oriPositionName = value.name;
};

const showSelectToPositionPopup = ref(false);
const isSelectToPositionOpen = (value: boolean) => {
  showSelectToPositionPopup.value = value;
};
const selectedToPosition = (value: positionData) => {
  tallyFrom.toAreaId = value.areaId;
  tallyFrom.toAreaName = value.areaName;
  tallyFrom.toPositionId = value.id;
  tallyFrom.toPositionName = value.name;
};

const isContinue = ref(false);
const isLoading = ref(false);
const onSubmit = (value: any) => {
  const postData = {
    id: record.value?.id,
    transportShipId: transportShip.id,
    tallyDate: tallyDateAndTimeSpace.tallyDate,
    timeSpace: tallyDateAndTimeSpace.timeSpace,
    shipLand: shipLand.value,
    outTimeSpace: tallyDateAndTimeSpace.outTimeSpace,
    operationType: operationType.id,
    workActivity: workActivity.ids ? workActivity.ids.join(",") : "",
    workActivityName: workActivity.value,
    arrangeId: assemblyLine.arrangeId,
    arrangeInfo: assemblyLine.arrangeInfo,
    cars: assemblyLine.cars,
    company: workerMachine.company,
    companyName: workerMachine.companyName,
    groups: workerMachine.group,
    groupsName: workerMachine.groupName,
    team: workerMachine.team,
    teamName: workerMachine.teamName,
    workerInfo: workerMachine.workerInfo,
    machineList: [] as any,
    hold: "",
    holdName: "",
    keeper: safeProduction.keeper,
    keeperName: safeProduction.keeperName,
    isSafeProduction: safeProduction.isSafeProduction,
    isCover: safeProduction.isCover,
    isBedding: safeProduction.isBedding,
    remark: safeProduction.remark,
    shipBillRemark: safeProduction.shipBillRemark,
    tallyType: tallyType.dictKey,
    cargoType: cargoType.code,
    cargoTypeName: cargoType.name,
    oriAreaId: tallyFrom.oriAreaId,
    oriAreaName: tallyFrom.oriAreaName,
    oriPositionId: tallyFrom.oriPositionId,
    oriPositionName: tallyFrom.oriPositionName,
    oriSpot: tallyFrom.oriSpot,
    oriTon: tallyFrom.oriTon,
    toAreaId: "",
    toAreaName: "",
    toPositionId: "",
    toPositionName: "",
    toSpot: "",
    toTon: "",
    areaId: "" as any,
    machineInfo: "",
    machineIds: "",
    machineKinds: "",
    machineTeamIds: "",
  };

  if (postData.tallyType === "VARIOUS") {
    postData.toAreaId = tallyFrom.toAreaId;
    postData.toAreaName = tallyFrom.toAreaName;
    postData.toPositionId = tallyFrom.toPositionId;
    postData.toPositionName = tallyFrom.toPositionName;
    postData.toSpot = tallyFrom.toSpot;
    postData.toTon = tallyFrom.toTon;
  }

  if (isReuse.value) {
    postData.id = "";
  }

  const token = useToken();
  postData.areaId = token.areaId || localStorage.getItem("areaId");


  if (postData.shipLand === "SHIP") {
    postData.hold = assemblyLine.hold;
    postData.holdName = assemblyLine.holdName;
  }

  if (assemblyLine.arrangeId && workerMachine.machineTree.length > 0) {
    workerMachine.machineTree.forEach(mk => {
      mk.machineList.forEach(machine => {
        const machineItem = {
          arrangeId: assemblyLine.arrangeId,
          shipLand: shipLand.value,
          tallyType: tallyType.dictKey,
          machineId: machine.machineId,
          machineName: machine.machineName,
          machineKind: mk.machineKind,
          machineKindName: mk.machineKindName,
          teamId: machine.teamId,
          teamName: machine.teamName,
          fullMachineName: machine.fullMachineName,
          isSelected: machine.isSelected ? "Y" : "N",
          isBulk: "Y"
        };
        postData.machineList.push(machineItem);
      });
    });
    let teamIdSet = new Set<string>();
    let teamNameSet = new Set<string>();
    let machineKindSet = new Set<string>();
    let machineIdSet = new Set<string>();

    postData.machineList.forEach((item: any) => {
      if (item.isSelected === "Y") {
        teamIdSet.add(item.teamId);
        teamNameSet.add(item.teamName);
        machineKindSet.add(item.machineKind);
        machineIdSet.add(item.machineId);
      }
    });

    let teamMachineMap = new Map();
    for (let teamName of teamNameSet) {
      teamMachineMap.set(teamName as string, []);
    }

    postData.machineList.forEach((item: any) => {
      if (item.isSelected === "Y") {
        teamMachineMap.get(item.teamName).push( item.machineKindName + item.machineName);
      }
    });

    let machineInfoList = [] as any;


    for (let key of teamMachineMap.keys()) {
      console.log(key);
      const name = key + "(" + teamMachineMap.get(key).join(",") + ")";
      machineInfoList.push(name);
    }

    postData.machineInfo = machineInfoList.join(",");
    postData.machineIds = setToJoinedStr(machineIdSet);
    postData.machineKinds = setToJoinedStr(machineKindSet);
    postData.machineTeamIds = setToJoinedStr(teamIdSet);

  }

  isLoading.value = true;
  SubmitBulkTally(postData).then((res: any) => {
    if (res.success) {
      if (!isContinue.value) {
        const editInfo = useEditOstInfo();
        editInfo.removeEditOstInfo();
        showSuccessToast("提交成功");
        setTimeout(() => {
          router.back();
        }, 500);
        return;
      }
      record.value.id = "";
      showSuccessToast("提交成功");
    } else {
      showFailToast("提交失败");
    }
    isLoading.value = false;
  });
};
const onFailed = (value: any) => {
  showFailToast("请检查表单");
};

function goBack(): void {
  const editInfo = useEditOstInfo();
  const billInfo = useBillInfo();
  editInfo.removeEditOstInfo();
  billInfo.removeBillInfo();
  router.back();
}
</script>

<template>
  <div
    class="container flex flex-col bg-gray-100 bg-no-repeat bg-contain bg-scroll back-image"
    ref="self"
  >
    <van-config-provider :theme-vars="themeVars">
      <FloatHeader :title="'散货外捣'"></FloatHeader>
      <van-nav-bar
        class="mt-[60px] text-white"
        style="background: transparent"
        :border="false"
        title="散货外捣"
        @click-left="goBack"
        left-arrow
      />
      <div class="flex flex-col h-auto w-[95%] mx-auto">
        <div class="flex-col flex w-full h-auto mb-[20px]">
          <div class="flex justify-center">
            <div class="w-full flex flex-col">
              <van-form @submit="onSubmit" @failed="onFailed">
                <!-- 船名舱单  -->
                <div
                  id="shipBillInfo"
                  class="w-full flex flex-col bg-white py-[10px] px-[15px] mt-1 rounded-lg"
                >
                  <div class="w h-[40px] flex justify-between">
                    <div class="flex h w items-center font-bold">
                      船舶货名信息
                    </div>
                  </div>
                  <van-cell-group :border="false">
                    <van-field
                      :border="true"
                      :disabled="isEdit"
                      is-link
                      readonly
                      v-model="transportShip.value"
                      name="shipName"
                      placeholder="请选择船名"
                      @click="beforeShowSelectShipPopup"
                      :rules="[{ required: true, message: '请选择船名' }]"
                    >
                      <template #label>
                        船名航次<span class="xing">*</span>
                      </template>
                    </van-field>
                    <van-popup
                      v-model:show="transportShip.showSelectShipPopup"
                      position="bottom"
                      round
                      duration="0"
                      :style="{ height: 'auto' }"
                    >
                      <SelectShip
                        @isOpen="isSelectShipOpen"
                        @selectedShip="selectedShip"
                      ></SelectShip>
                    </van-popup>
                    <van-field
                      :border="false"
                      is-link
                      readonly
                      v-model="cargoType.name"
                      name="shipName"
                      placeholder="请选择货名"
                      @click="cargoType.showSelectCargoTypePopup = true"
                      :rules="[{ required: true, message: '请选择货名' }]"
                    >
                      <template #label>
                        货名<span class="xing">*</span>
                      </template>
                    </van-field>
                    <van-popup
                      v-model:show="cargoType.showSelectCargoTypePopup"
                      position="bottom"
                      round
                      duration="0"
                      :style="{ height: 'auto' }"
                    >
                      <SelectShipCargoType
                        :shipId="transportShip.id"
                        @isOpen="isSelectShipCargoTypeOpen"
                        @selectedShipCargoType="selectedShipCargoType"
                      ></SelectShipCargoType>
                    </van-popup>
                  </van-cell-group>
                </div>
                <!-- 日期班次  -->
                <div
                  id="tallyDateShift"
                  class="w-full flex flex-col bg-white py-[10px] px-[15px] rounded-lg mt-3"
                >
                  <div class="w h-[40px] flex justify-between">
                    <div class="flex h w items-center font-bold">日期班次</div>
                  </div>
                  <van-cell-group :border="false">
                    <van-field
                      is-link
                      readonly
                      v-model="tallyDateAndTimeSpace.tallyDate"
                      name="tallyDate"
                      placeholder="请选择工班日期"
                      @click="tallyDateAndTimeSpace.showCalendar = true"
                      :rules="[{ required: true, message: '请选择工班日期' }]"
                    >
                      <template #label>
                        日期<span class="xing">*</span>
                      </template>
                    </van-field>
                    <van-calendar
                      :min-date="tallyDateAndTimeSpace.minDate"
                      :max-date="tallyDateAndTimeSpace.maxDate"
                      :default-date="tallyDateAndTimeSpace.defaultDate"
                      duration="0"
                      v-model:show="tallyDateAndTimeSpace.showCalendar"
                      :show-confirm="false"
                      @confirm="onCalendarConfirm"
                    />

                    <van-field
                      :border="false"
                      name="timeSpace"
                      :rules="[{ required: true, message: '请选择班次' }]"
                    >
                      <template #label>
                        班次<span class="xing">*</span>
                      </template>
                      <template #input>
                        <van-radio-group
                          shape="dot"
                          v-model="tallyDateAndTimeSpace.timeSpace"
                          direction="horizontal"
                        >
                          <van-radio
                            icon-size="18px"
                            :key="item?.dictKey"
                            v-for="item in timeSpaceList"
                            :name="item?.dictKey"
                          >{{ item?.dictValue }}
                          </van-radio>
                        </van-radio-group>
                      </template>
                    </van-field>
                  </van-cell-group>
                </div>

                <!-- 作业过程  -->
                <div
                  id="operationProcess"
                  class="w-full flex flex-col bg-white py-[10px] px-[15px] rounded-lg mt-3"
                >
                  <div class="w h-[40px] flex justify-between">
                    <div class="flex h w items-center font-bold">作业过程</div>
                  </div>
                  <van-cell-group :border="false">
                    <van-field
                      name="shipLand"
                      :disabled="isEdit"
                      :rules="[{ required: true, message: '请选择航陆运' }]"
                    >
                      <template #label>
                        航陆运<span class="xing">*</span>
                      </template>
                      <template #input>
                        <van-radio-group
                          shape="dot"
                          v-model="shipLand"
                          :disabled="isEdit"
                          direction="horizontal"
                        >
                          <van-radio
                            icon-size="18px"
                            :key="item?.dictKey"
                            v-for="item in shipLandList"
                            :name="item?.dictKey"
                          >{{ item?.dictValue }}
                          </van-radio>
                        </van-radio-group>
                      </template>
                    </van-field>
                    <van-field
                      is-link
                      readonly
                      :disabled="isEdit"
                      v-model="operationType.value"
                      name="operationType"
                      placeholder="请选择作业过程"
                      @click="beforeSelectOperationProcessOpen"
                      :rules="[{ required: true, message: '请选择作业过程' }]"
                    >
                      <template #label>
                        作业过程<span class="xing">*</span>
                      </template>
                    </van-field>
                    <van-popup
                      v-model:show="
                        operationType.showSelectOperationProcessPopup
                      "
                      position="bottom"
                      round
                      duration="0"
                      :style="{ height: 'auto' }"
                    >
                      <SelectOperationProcess
                        :shipLand="shipLand"
                        @selectedOperationProcess="selectedOperationProcess"
                        @isOpen="isSelectOperationProcessOpen"
                      ></SelectOperationProcess>
                    </van-popup>
                    <van-field
                      is-link
                      readonly
                      v-model="tallyType.dictValue"
                      name="tallyType"
                      placeholder="请选择出入库类型"
                      @click="tallyType.showSelectBulkTallyTypePopup = true"
                      :rules="[{ required: true, message: '请选择出入库类型' }]"
                    >
                      <template #label>
                        出入库<span class="xing">*</span>
                      </template>
                    </van-field>
                    <van-popup
                      v-model:show="tallyType.showSelectBulkTallyTypePopup"
                      position="bottom"
                      round
                      duration="0"
                      :style="{ height: 'auto' }"
                    >
                      <SelectBulkTallyType
                        :tallyType="tallyType.dictKey"
                        @selectBulkTallyType="selectedBulkTallyType"
                        @isOpen="isSelectBulkTallyType"
                      ></SelectBulkTallyType>
                    </van-popup>
                    <van-field
                      v-if="tallyType.dictKey === 'OUT'"
                      :border="true"
                      name="outTimeSpace"
                    >
                      <template #label>
                        出库时间
                      </template>
                      <template #input>
                        <van-radio-group
                          shape="dot"
                          v-model="tallyDateAndTimeSpace.outTimeSpace"
                          direction="horizontal"
                        >
                          <van-radio
                            icon-size="18px"
                            :key="item?.dictKey"
                            v-for="item in outTimeSpaceList"
                            :name="item?.dictKey"
                          >{{ item?.dictValue }}
                          </van-radio>
                        </van-radio-group>
                      </template>
                    </van-field>
                    <van-field
                      is-link
                      readonly
                      rows="1"
                      autosize
                      type="textarea"
                      v-model="workActivity.value"
                      name="作业活动"
                      label="作业活动"
                      placeholder="请选择作业活动"
                      @click="workActivity.showSelectWorkActivityPopup = true"
                    />
                    <van-popup
                      v-model:show="workActivity.showSelectWorkActivityPopup"
                      position="bottom"
                      duration="0"
                      round
                      :style="{ height: 'auto' }"
                    >
                      <SelectWorkActivity
                        :shipLand="shipLand"
                        :ids="workActivity.ids"
                        @isOpen="isSelectWorkActivityOpen"
                        @selectedProcess="selectedWorkActivity"
                      >
                      </SelectWorkActivity>
                    </van-popup>
                    <van-field
                      is-link
                      readonly
                      :border="shipLand !== ''"
                      v-model="assemblyLine.arrangeInfo"
                      name="assemblyLine"
                      rows="1"
                      autosize
                      type="textarea"
                      label="作业线"
                      placeholder="请选择作业线"
                      @click="assemblyLine.showSelectArrangePopup = true"
                    />
                    <van-popup
                      v-model:show="assemblyLine.showSelectArrangePopup"
                      position="bottom"
                      duration="0"
                      round
                      :style="{ height: 'auto' }"
                    >
                      <SelectShipArrange
                        v-if="shipLand === 'SHIP'"
                        :transportShipId="transportShip.id"
                        :timeSpace="tallyDateAndTimeSpace.timeSpace"
                        :planDate="tallyDateAndTimeSpace.tallyDate"
                        @isOpen="isSelectArrangeOpen"
                        @selectedArrange="selectedArrange"
                      >
                      </SelectShipArrange>
                      <SelectLandArrange
                        v-if="shipLand === 'LAND'"
                        :timeSpace="tallyDateAndTimeSpace.timeSpace"
                        :planDate="tallyDateAndTimeSpace.tallyDate"
                        @isOpen="isSelectArrangeOpen"
                        @selectedArrange="selectedArrange"
                      >
                      </SelectLandArrange>
                    </van-popup>
                    <van-field
                      v-if="shipLand === 'SHIP'"
                      is-link
                      readonly
                      :border="false"
                      label="舱口"
                      v-model="assemblyLine.holdName"
                      name="assemblyLine"
                      placeholder="请选择舱口"
                      @click="assemblyLine.showSelectHoldPopup = true"
                    >
                    </van-field>
                    <van-popup
                      v-model:show="assemblyLine.showSelectHoldPopup"
                      position="bottom"
                      duration="0"
                      round
                      :style="{ height: 'auto' }"
                    >
                      <SelectHold
                        :arrangeId="assemblyLine.arrangeId"
                        :holdList="assemblyLine.holdsList"
                        :selectedHold="assemblyLine.hold"
                        @isOpen="isSelectHoldOpen"
                        @selectHold="selectedHold"
                      >
                      </SelectHold>
                    </van-popup>
                    <van-field
                      v-if="shipLand === 'LAND'"
                      :border="false"
                      label="车数"
                      v-model="assemblyLine.cars"
                      name="assemblyLine"
                      placeholder="请填写车数"
                    >
                    </van-field>
                  </van-cell-group>
                </div>
                <!-- 理货表单 -->
                <div
                  id="tallyFrom"
                  class="w-full flex flex-col bg-white py-[10px] px-[15px] rounded-lg mt-3"
                >
                  <div class="w h-[40px] flex justify-between">
                    <div class="flex h w items-center font-bold">场位信息</div>
                  </div>
                  <van-cell-group :border="false">
                    <van-field
                      readonly
                      name="position"
                      label="货场"
                      placeholder="请选择货场"
                      is-link
                      v-model="tallyFrom.oriPositionName"
                      @click="showSelectOriPositionPopup = true"
                      :rules="[{ required: true, message: '请选择货场' }]"
                    >
                      <template #label>
                        货场<span class="xing">*</span>
                      </template>
                    </van-field>
                    <van-popup
                      v-model:show="showSelectOriPositionPopup"
                      position="bottom"
                      round
                      duration="0"
                      :style="{ height: 'auto' }"
                    >
                      <SelectPosition
                        @isOpen="isSelectOriPositionOpen"
                        @selectedPosition="selectedOriPosition"
                      ></SelectPosition>
                    </van-popup>
                    <van-field
                      name="position"
                      label="货位"
                      v-model="tallyFrom.oriSpot"
                      placeholder="请填写货位"
                      :rules="[{ required: true, message: '请填写货位' }]"
                    >
                      <template #label>
                        货位<span class="xing">*</span></template
                      >
                    </van-field>
                    <van-field
                      name="ton"
                      :border="tallyType.dictKey === 'VARIOUS'"
                      v-model="tallyFrom.oriTon"
                      label="吨数"
                      placeholder="请输入吨数"
                      clickable
                      :rules="[{ validator, message: '请输入吨数' }]"
                    >
                      <template #label>
                        吨数<span class="xing">*</span>
                      </template>
                    </van-field>

                    <van-field
                      v-if="tallyType.dictKey === 'VARIOUS'"
                      readonly
                      name="position"
                      label="作业后货场"
                      placeholder="请选择货场"
                      is-link
                      v-model="tallyFrom.toPositionName"
                      @click="showSelectToPositionPopup = true"
                      :rules="[{ required: true, message: '请选择货场' }]"
                    >
                      <template #label>
                        作业货场<span class="xing">*</span>
                      </template>
                    </van-field>
                    <van-popup
                      v-model:show="showSelectToPositionPopup"
                      position="bottom"
                      round
                      duration="0"
                      :style="{ height: 'auto' }"
                    >
                      <SelectPosition
                        @isOpen="isSelectToPositionOpen"
                        @selectedPosition="selectedToPosition"
                      ></SelectPosition>
                    </van-popup>
                    <van-field
                      v-if="tallyType.dictKey === 'VARIOUS'"
                      name="position"
                      label="作业后货位"
                      v-model="tallyFrom.toSpot"
                      placeholder="请填写货位"
                      :rules="[{ required: true, message: '请填写货位' }]"
                    >
                      <template #label>
                        作业货位<span class="xing">*</span></template
                      >
                    </van-field>
                    <van-field
                      v-if="tallyType.dictKey === 'VARIOUS'"
                      name="ton"
                      :border="false"
                      v-model="tallyFrom.toTon"
                      label="吨数"
                      placeholder="请输入作业吨数"
                      :rules="[{ validator, message: '请输入作业吨数' }]"
                    >
                      <template #label>
                        作业吨数<span class="xing">*</span>
                      </template>
                    </van-field>
                  </van-cell-group>
                </div>

                <!-- 工人机械  -->
                <div
                  id="safeProduction"
                  class="w-full flex flex-col bg-white py-[10px] px-[15px] rounded-lg mt-3"
                >
                  <div class="w h-[40px] flex justify-between">
                    <div class="flex h w items-center font-bold">工人/机械</div>
                  </div>
                  <van-cell-group :border="false">
                    <van-field
                      is-link
                      readonly
                      :border="workerMachine.machineTree.length > 0"
                      v-model="workerMachine.workerInfo"
                      name="工人"
                      label="工人"
                      @click="workerMachine.showSelectWorkerPopup = true"
                    />
                    <van-popup
                      v-model:show="workerMachine.showSelectWorkerPopup"
                      position="bottom"
                      duration="0"
                      round
                      :style="{ height: 'auto' }"
                    >
                      <SelectTeam
                        @isOpen="isSelectTeamOpen"
                        @selectedTeam="selectedTeam"
                      ></SelectTeam>
                    </van-popup>
                    <div class="flex w flex-col mt-[10px]">
                      <div
                        :key="mk?.machineKind"
                        v-for="mk in workerMachine.machineTree"
                        class="flex w gap-2 mb-[10px]"
                      >
                        <div
                          class="flex w-auto h-[25px] py-[2px] px-[4px] bg-blue-300 text-sm text-white mr-[10px] justify-center items-center"
                        >
                          {{ mk?.machineKindName }}
                        </div>
                        <div class="flex flex-1 h-auto flex-wrap gap-2">
                          <div
                            :key="machine?.machineId"
                            v-for="machine in mk.machineList"
                            @click="machine.isSelected = !machine.isSelected"
                            :class="
                              machine.isSelected
                                ? 'bg-blue-400 text-white'
                                : 'bg-gray-100 text-black'
                            "
                            class="flex w-auto h-auto py-[5px] px-[10px] text-sm"
                          >
                            {{ machine?.fullMachineName }}
                          </div>
                        </div>
                      </div>
                    </div>
                  </van-cell-group>
                </div>

                <!-- 文明生产  -->
                <div
                  id="safeProduction"
                  class="w-full flex flex-col bg-white py-[10px] px-[15px] rounded-lg mt-3"
                >
                  <div class="w h-[40px] flex justify-between">
                    <div class="flex h w items-center font-bold">
                      安全生产相关
                    </div>
                  </div>
                  <van-cell-group :border="false">
                    <van-field
                      is-link
                      readonly
                      v-model="safeProduction.keeperName"
                      name="保管员"
                      label="保管员"
                      @click="safeProduction.showSelectKeeperPopup = true"
                    />
                    <van-popup
                      v-model:show="safeProduction.showSelectKeeperPopup"
                      position="bottom"
                      duration="0"
                      round
                      :style="{ height: 'auto' }"
                    >
                      <SelectKeeper
                        @isOpen="isSelectKeeperOpen"
                        @selectedKeeper="selectedKeeper"
                      >
                      </SelectKeeper>
                    </van-popup>
                    <van-field
                      name="isSafeProduction"
                      :rules="[{ required: true, message: '请选择类型' }]"
                    >
                      <template #label>
                        安全生产<span class="xing">*</span>
                      </template>
                      <template #input>
                        <van-radio-group
                          shape="dot"
                          v-model="safeProduction.isSafeProduction"
                          direction="horizontal"
                        >
                          <van-radio name="Y" icon-size="18px">是</van-radio>
                          <van-radio name="N" icon-size="18px">否</van-radio>
                        </van-radio-group>
                      </template>
                    </van-field>
                    <van-field
                      name="isCover"
                      :rules="[{ required: true, message: '请选择苫盖' }]"
                    >
                      <template #label>
                        苫盖<span class="xing">*</span>
                      </template>
                      <template #input>
                        <van-radio-group
                          shape="dot"
                          v-model="safeProduction.isCover"
                          direction="horizontal"
                        >
                          <van-radio name="Y" icon-size="18px">是</van-radio>
                          <van-radio name="N" icon-size="18px">否</van-radio>
                          <van-radio name="OT" icon-size="18px"
                          >不需要
                          </van-radio>
                        </van-radio-group>
                      </template>
                    </van-field>
                    <van-field
                      name="isBedding"
                      :rules="[{ required: true, message: '请选择铺垫' }]"
                    >
                      <template #label>
                        铺垫<span class="xing">*</span>
                      </template>
                      <template #input>
                        <van-radio-group
                          shape="dot"
                          v-model="safeProduction.isBedding"
                          direction="horizontal"
                        >
                          <van-radio name="Y" icon-size="18px">是</van-radio>
                          <van-radio name="N" icon-size="18px">否</van-radio>
                          <van-radio name="OT" icon-size="18px"
                          >不需要
                          </van-radio>
                        </van-radio-group>
                      </template>
                    </van-field>
                    <van-field
                      :border="false"
                      v-model="safeProduction.remark"
                      autosize
                      rows="1"
                      label="备注"
                      placeholder="此处输入内容"
                      type="textarea"
                    />
                  </van-cell-group>
                </div>
                <!-- 返回顶部  -->
                <van-back-top right="5vw" bottom="15vh" />
                <!-- 按钮组  -->
                <div style="margin: 16px">
                  <div class="flex w-full gap-2" v-if="!isLoading">
                    <van-button
                      class="flex flex-1"
                      block
                      color="#e6edff"
                      style="color: #4e6eb3"
                      native-type="submit"
                      @click="isContinue = false"
                    >
                      保存并提交
                    </van-button>
                    <van-button
                      class="flex flex-1"
                      block
                      color="#175eff"
                      native-type="submit"
                      @click="isContinue = true"
                    >
                      保存并继续
                    </van-button>
                  </div>
                  <div class="flex w-full gap-2" v-if="isLoading">
                    <van-button
                      class="flex flex-1"
                      block
                      disabled
                      loading
                      color="#e6edff"
                      style="color: #4e6eb3"
                      native-type="submit"
                      @click="isContinue = false"
                    >
                      保存并提交
                    </van-button>
                    <van-button
                      class="flex flex-1"
                      block
                      disabled
                      loading
                      color="#175eff"
                      native-type="submit"
                      @click="isContinue = true"
                    >
                      保存并继续
                    </van-button>
                  </div>
                </div>
              </van-form>
            </div>
          </div>
        </div>
      </div>
    </van-config-provider>
  </div>
</template>
<style scoped>
.header {
  background: linear-gradient(144deg, rgba(64, 169, 255, 1) 6%, #f7f8fa 6%);
}

.back-image {
  background-image: url("../../assets/back.png");
}
</style>
